<script setup lang="ts">
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';
    const props = defineProps({
        talentList: {
        type: Array,
        default: () => []
       }
    })
    const router = useRouter()
    const gotoDetail = (id: any) => {
        router.push('/talent/details/'+id)
    }
</script>

<template>
    <div class="talent-item" 
        v-for="(item,index) in talentList" :key="index" 
        @click="gotoDetail(item.id)"
    >
       <div class="talent-item-top">
            <div class="talent-item-pic">
                <img src="@/assets/img/icon/icon-message.png">
            </div>
            <div class="telent-item-cont">
                <h3>李想<span class="orange">驻场</span><span class="blue">远程</span><span class="green">全职</span></h3>
                <p>前端工程师 | 5年 | 本科 | 25岁</p>
                <dl>
                    <dt>vue</dt>
                    <dt>node.js</dt>
                    <dt>小程序</dt>
                </dl>
            </div>
       </div>
       <div class="talebnt-item-bottom">
            <label>已做两个项目</label>
            <span><van-icon name="location-o" />北京</span>
       </div>
    </div>
</template>


<style scoped>
.talent-item {
    margin: 0 0.64rem 0.53rem;
    padding: 0.77rem 0.64rem 0;
    background: #FFFFFF;
    border-radius: 0.53rem;
    font-size: 0.69rem;
}
.talent-item-top {
    display: flex;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f5f5f5;
}
.talent-item-pic {
    border-radius: 0.27rem;
    width: 4rem;
    height: 4rem;
    overflow: hidden;
    margin-right: 0.85rem;
}
.talent-item-pic img {
    width: 100%;
    height: 100%;
}
.telent-item-cont {

}
.telent-item-cont h3 {
    font-weight: 400;
    font-size: 0.91rem;
    color: #333333;
    display: flex;
    margin-bottom: 0.64rem;
    align-items: center;
}
.telent-item-cont h3 span {
    width: 1.97rem;
    height: 0.85rem;
    line-height: 0.85rem;
    border-radius: 0.3rem;
    font-size: 0.59rem;
    font-weight: 300;
    color: #FFFFFF;
    margin-left: 0.2rem;
    text-align: center;
}
.telent-item-cont h3 span.orange {
    background: linear-gradient(90deg, #FEA829, #FE8F27);
}
.telent-item-cont h3 span.blue {
    background: linear-gradient(90deg, #42C3E8, #249AF6);
}
.telent-item-cont h3 span.green {
    background: linear-gradient(90deg, #55EDB9, #52DEA4);
}
.telent-item-cont p {
    font-weight: 100;
    font-size: 0.69rem;
    color: #666666;
    line-height: 0.69rem;
    margin-bottom: 0.56rem;
}
dl {
    display: flex;
}
dl dt {
    padding: 0.3rem 0.5rem;
    font-weight: 300;
    font-size: 0.59rem;
    color: #666666;
    line-height: 0.59rem;
    margin-right: 0.27rem;
    
    background: #F6F7F8;
    border-radius: 0.16rem;
}
.talebnt-item-bottom {
    display: flex;
    padding: 0.72rem 0 0.72rem;
}
.talebnt-item-bottom label {
    flex: 1;
}
.talebnt-item-bottom span {
    text-align: right;
}
.talebnt-item-bottom i {
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 0.1rem;
}
</style>